import { browser } from '@/utils/http'
import Konva from 'konva'
import { ERecorderBrashColor } from './index'
import { EDotDrawingToolName, EDrawingToolName, hPxRatio, wPxRatio } from './boardProperty'

export const createImageText = (
  stage: Konva.Stage,
  color: ERecorderBrashColor,
  layers: Array<Konva.Shape | Konva.Layer>,
  bgLayer: Konva.Layer,
) => {
  const layer = bgLayer
  const pos = { x: 0, y: 0 }

  pos.x = stage.width() / 2 - 80
  pos.y = stage.height() / 2 - 15
  const simpleText = new Konva.Text({
    x: pos.x,
    y: pos.y,
    name: 'simpleText',
    text: '双击修改',
    placeholder: '双击修改',
    fontFamily: 'Calibri',
    fill: color,
    fontSize: 22 * wPxRatio(),
    draggable: true,
    width: 150 * wPxRatio(),
    height: 31 * hPxRatio(),
  })

  simpleText.on('transform', function () {
    simpleText.setAttrs({
      width: simpleText.width() * simpleText.scaleX(),
      scaleX: 1,
    })
  })

  simpleText.on('dblclick dbltap', () => {
    simpleText.hide()
    // tr.hide();
    const textPosition = simpleText.absolutePosition()

    const areaPosition = {
      x: stage.container().offsetLeft + textPosition.x,
      y: stage.container().offsetTop + textPosition.y,
    }

    //创建可编辑区域
    const textarea = document.createElement('textarea')
    stage.container().append(textarea)

    textarea.value = simpleText.text() === '双击修改' ? '' : simpleText.text()
    textarea.style.position = 'absolute'
    textarea.style.top = areaPosition.y + 'px'
    textarea.style.left = areaPosition.x + 'px'
    textarea.style.width = simpleText.width() - simpleText.padding() * 2 + 'px'
    textarea.style.height = simpleText.height() - simpleText.padding() * 2 + 5 + 'px'
    textarea.style.fontSize = simpleText.fontSize() + 'px'
    textarea.style.border = 'none'
    textarea.style.padding = '0px'
    textarea.style.margin = '0px'
    textarea.style.overflow = 'hidden'
    textarea.style.background = 'none'
    textarea.style.outline = 'none'
    textarea.style.resize = 'none'
    textarea.style.lineHeight = simpleText.lineHeight().toString()
    textarea.style.fontFamily = simpleText.fontFamily()
    textarea.style.transformOrigin = 'left top'
    textarea.style.textAlign = simpleText.align()
    textarea.style.color = simpleText.fill()
    const rotation = simpleText.rotation()
    let transform = ''
    if (rotation) {
      transform += 'rotateZ(' + rotation + 'deg)'
    }

    let px = 0
    // also we need to slightly move textarea on firefox
    // because it jumps a bit
    const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
    if (isFirefox) {
      px += 2 + Math.round(simpleText.fontSize() / 20)
    }
    transform += 'translateY(-' + px + 'px)'

    textarea.style.transform = transform

    // reset height
    textarea.style.height = 'auto'
    // after browsers resized it we can set actual value
    textarea.style.height = textarea.scrollHeight + 3 + 'px'

    textarea.focus()

    const removeTextarea = () => {
      textarea.parentNode?.removeChild(textarea)
      // window.removeEventListener('click', handleOutsideClick);
      simpleText.show()
      stage.off('tap.simpleText')
      // tr.show();
    }

    function setTextareaWidth(newWidth: any) {
      if (!newWidth) {
        // set width for placeholder
        newWidth = simpleText.placeholder.length * simpleText.fontSize()
      }
      // some extra fixes on different browsers
      const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent)
      const isFirefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1
      if (isSafari || isFirefox) {
        newWidth = Math.ceil(newWidth)
      }

      const isEdge = document.DOCUMENT_NODE || /Edge/.test(navigator.userAgent)
      if (isEdge) {
        newWidth += 1
      }
      textarea.style.width = newWidth + 'px'
    }
    const setOutsideClick = () => {
      if (simpleText && textarea) {
        simpleText.text(textarea.value === '' ? '双击修改' : textarea.value)
        simpleText.height(textarea.scrollHeight)
        removeTextarea()
        const scale = simpleText.getAbsoluteScale().x
        setTextareaWidth(simpleText.width() * scale)
        textarea.style.height = 'auto'
        textarea.style.height = textarea.scrollHeight + 'px'
      }
    }

    textarea.addEventListener('focusout', function (e) {
      setOutsideClick()
    })
    stage.on('tap.simpleText', (e) => {
      if (browser.versions.android) {
        setOutsideClick()
      }
    })
  })
  //最后
  layer.add(simpleText)
  layers.push(simpleText)
}
